<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>选项卡切换</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        list-style-type: none;
      }
      #box {
        height: 600px;
        width: 600px;
        margin: 100px auto;
      }
      #title {
        height: 200px;
        width: 600px;
        border: 2px solid #000;
        display: flex;
      }
      #title li {
        height: 200px;
        width: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 50px;
        border: 2px solid #000;
      }

      #title li:hover {
        cursor: pointer;
      }
      #content {
        height: 400px;
        width: 600px;
        border: 2px solid #000;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 50px;
      }

      #content li {
        display: none;
      }

      .checked {
        background-color: skyblue;
      }

      .show {
        display: block !important;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <ul id="title">
        <li class="tit checked">1</li>
        <li class="tit">2</li>
        <li class="tit">3</li>
      </ul>
      <ul id="content">
        <li class="cont show">111111111111111</li>
        <li class="cont">222222222222222</li>
        <li class="cont">333333333333333</li>
      </ul>
    </div>
    <script>
      let titleEles = document.getElementsByClassName('tit')
      let contentEle = document.getElementsByClassName('cont')

      for (let i = 0; i < titleEles.length; i++) {
        titleEles[i].addEventListener('click', function () {
          for (let i = 0; i < titleEles.length; i++) {
            titleEles[i].classList.remove('checked')
          }
          this.classList.add('checked')
          for (let j = 0; j < titleEles.length; j++) {
            contentEle[j].classList.remove('show')
          }
          contentEle[i].classList.add('show')
        })
      }
    </script>
  </body>
</html>
